<template>

    <div class="login-container">
      <!-- 左侧扫码登录 -->
      <div class="left-section">
        <div class="qcode">
          <h2>京东APP扫码登录</h2>
          <span>打开<a class="jd-app">京东APP</a>点左上角扫一扫
            <a class="find" @mouseenter="showImage = true" @mouseleave="showImage = false">查看教程</a>

          </span>
          <div class="image-container">
            <img src="../../assets/imgs/login/qcode.png" alt="" class="qr-image">
            <img src="../../assets/imgs/login/hint_img.png" alt="" class="hint-image" v-show="showImage">
          </div>
        </div>
      </div>

      <!-- 右侧表单登录 -->
      <div class="right-section">
        <div class="login-form">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <!-- 密码登录 -->
            <el-tab-pane label="密码登录" name="first">
              <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
                <el-form-item prop="username">
                  <el-input v-model="loginForm.username" placeholder="请输入手机号/用户名/邮箱" />
                </el-form-item>
                <el-form-item prop="password">
                  <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" show-password />
                </el-form-item>
                <el-button class="login-btn" type="primary" @click="handleLogin" :loading="loading">
                  登录
                </el-button>
              </el-form>
            </el-tab-pane>

            <!-- 短信登录 -->
            <el-tab-pane label="短信登录" name="second">
              <el-form :model="smsForm" :rules="smsRules" ref="smsFormRef">

                <el-form-item prop="phone">
                  <el-input v-model="smsForm.phone" placeholder="请输入手机号">
                    <template #prepend>
                      <el-select v-model="smsForm.region" style="width: 120px" placeholder="选择地区">
                        <el-option label="0086" value="86" />
                        <el-option label="中国香港 (+852)" value="852" />
                        <el-option label="中国澳门 (+853)" value="853" />
                        <el-option label="中国台湾 (+886)" value="886" />
                        <el-option label="韩国 (+82)" value="82" />
                        <el-option label="日本 (+81)" value="81" />
                      </el-select>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input v-model="smsForm.code" placeholder="请输入验证码">
                    <template #append>
                      <el-button type="primary" size="small" @click="sendCode" :disabled="codeDisabled">
                        {{ codeButtonText }}
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <el-button class="login-btn" type="primary" @click="handleSmsLogin">
                  登录
                </el-button>
              </el-form>
            </el-tab-pane>
          </el-tabs>

          <!-- 四种登录方式 -->
          <div class="login-ways-container">
            <div class="login-way" v-for="item in loginWays" :key="item.type">
              <i :class="['iconfont', item.icon]"></i>
              <span>{{ item.text }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
const activeName = ref('first');
const authStore = useAuthStore()
let showImage = ref(false)
// 表单数据
const loginForm = ref({
  username: '',
  password: ''
})

const smsForm = ref({
  phone: '',
  code: '',
  region: '86' // 默认选择中国大陆
})

// 验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
  ]
}

const smsRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
  ]
}

// 登录逻辑
const loading = ref(false)
const loginFormRef = ref(null)
const smsFormRef = ref(null)
let dialogVisible = ref(false)
const handleLogin = async () => {
  try {
    await loginFormRef.value.validate()
    loading.value = true
    await authStore.login(loginForm.value.username, loginForm.value.password)
    ElMessage.success('登录成功')
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error(error.message || '登录失败')
  } finally {
    loading.value = false
  }
}

// 短信验证码逻辑
const codeDisabled = ref(false)
const codeButtonText = ref('获取验证码')
let countdown = 60

const sendCode = () => {
  smsFormRef.value.validateField('phone', async (valid) => {
    if (valid) {
      codeDisabled.value = true
      const timer = setInterval(() => {
        countdown--
        codeButtonText.value = `${countdown}秒后重试`
        if (countdown <= 0) {
          clearInterval(timer)
          codeDisabled.value = false
          codeButtonText.value = '获取验证码'
          countdown = 60
        }
      }, 1000)
      ElMessage.success('验证码已发送: 123456')
    }
  })
}

const handleSmsLogin = async () => {
  try {
    await smsFormRef.value.validate()
    if (smsForm.value.code !== '123456') {
      throw new Error('验证码错误')
    }
    await authStore.login(smsForm.value.phone, 'admin') // 使用手机号登录
    ElMessage.success('登录成功')
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error(error.message || '登录失败')
  }
}

// 其他原有代码保持不变...
</script>
<style lang="scss">
.custom-dialog {

  .el-dialog__headerbtn {

    border: 2px solid rgb(215, 215, 216);
    border-radius: 100px;
    position: absolute;
    top: -35px;
    right: -35px;
    width: 40px;
    height: 40px;
    cursor: pointer;

    .el-dialog__close {
      font-size: 15px;
      color: rgb(215, 215, 216);
      font-weight: 700;
    }
  }

  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }

  .el-tabs .el-tabs__item {
    color: rgb(26, 26, 26);
    font-weight: 700;

    &:hover {
      color: #e4393c;
    }

  }

}
</style>

<style scoped lang="scss">
.login-container {
  display: flex;
  height: 100%;


  /* 左侧扫码区域 */
  .left-section {
    flex: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #f0f0f0;

    .image-container {
      position: relative;
      display: flex;
      justify-content: center;
      gap: 10px;
      height: 160px;
      margin: 15px 0;

      .qr-image {
        width: 130px;
        height: 130px;
      }

      .hint-image {
        width: 130px;
        height: 130px;
        animation: fadeIn 0.3s ease-in-out;
      }
    }

    .qcode {
      text-align: center;
      padding: 20px;

      h2 {
        font-size: 20px;
        font-weight: 700;
        color: #333;
        margin-bottom: 15px;
      }

      img {
        width: 160px;
        height: 160px;
        margin: 15px 0;
      }

      span {
        font-size: 14px;
        color: #666;

        .jd-app {
          color: #e4393c;
          margin: 0 3px;


        }

        .find {
          color: #999;
          margin-left: 10px;
          text-decoration: underline;
          cursor: pointer;

          &:hover {
            color: #e4393c;
          }

        }
      }
    }
  }

  /* 右侧表单区域 */
  .right-section {
    flex: 0.5;
    padding: 20px;

    .login-form {
      width: 100%;
      max-width: 300px;
      margin: 0 auto;

      /* 输入框样式 */
      .el-input {
        margin-bottom: 15px;
      }

      /* 登录按钮 */
      .login-btn {
        width: 100%;
        height: 40px;
        background: #e4393c;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        margin-top: 10px;

        &:hover {
          opacity: 0.9;
        }
      }

      /* Tabs样式 */
      :deep(.el-tabs) {
        .el-tabs__active-bar {
          display: none;
        }




        .el-tabs__active-bar {
          background-color: #e4393c;
        }

        .el-tabs__nav-wrap::after {
          height: 1px;
          background-color: #f0f0f0;
        }
      }

      /* 四种登录方式容器 */
      .login-ways-container {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        padding: 0 5px;

        .login-way {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          padding: 5px;
          border-radius: 4px;
          transition: all 0.3s;
          width: 60px;

          .country-code {
            padding: 0 10px;
            color: #666;
            font-size: 14px;
            border-right: 1px solid #dcdfe6;
          }

          /* 调整输入框样式以适应国家区号 */
          :deep(.el-input-group__prepend) {
            background-color: #fff;
            border-right: none;
            padding: 0;
          }


          :deep(.el-select .el-input__inner) {
            border: none;
            box-shadow: none;
            padding-left: 10px;
          }

          &:hover {
            background-color: #f5f5f5;
          }

          .iconfont {
            font-size: 24px;
            margin-bottom: 5px;
          }

          span {
            font-size: 12px;
            color: #666;
          }

          /* 不同平台图标颜色 */
          .icon-weixin {
            color: #07C160;
          }

          .icon-QQ {
            color: #12B7F5;
          }

          .icon-weibo {
            color: #E6162D;
          }

          .icon-zhifubao {
            color: #1296DB;
          }
        }
      }
    }
  }
}
</style>
